﻿import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12

ListView {
    id: control
    property int itemHeight: 69

    spacing: 0
    currentIndex: 0

    orientation: ListView.Vertical
    boundsBehavior: Flickable.StopAtBounds
    flickableDirection: Flickable.AutoFlickIfNeeded
    snapMode: ListView.SnapToItem

    highlightMoveDuration: 0
    highlightRangeMode: ListView.ApplyRange
    preferredHighlightBegin: 40
    preferredHighlightEnd: width - 40

    delegate: ItemDelegate {
        id: tabDelegate
        text: modelData
        height: itemHeight
        width: control.width
        highlighted: ListView.isCurrentItem
        onClicked: control.currentIndex = index

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.NoButton
            cursorShape: Qt.PointingHandCursor
        }

        contentItem: Rectangle {
            anchors.fill: parent
            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(width, 0)
                gradient: Gradient {
                    GradientStop {position: 0.0; color: "#272C39"}
                    GradientStop {position: 0.9; color: control.currentIndex === index ? "#2BD9FF" : "#272C39"}
                }
            }
            Text {
                anchors.centerIn: parent
                text: tabDelegate.text
                color: control.currentIndex === index ? "#FFFFFF" : "#879FB6"
                font.family: "Microsoft YaHei"
                font.pixelSize: 24
                verticalAlignment: Qt.AlignVCenter
                horizontalAlignment: Qt.AlignHCenter
            }
        }
    }
}

